<script setup lang="ts">
import { computed, ref } from 'vue'
import ToolCard from './ToolCard.vue'
import ToolModal from './ToolModal.vue'

export type ToolDef = {
  id: string
  name: string
  description: string
  icon?: string
  category: 'text' | 'converter' | 'calculator' | 'developer' | 'utilities'
  component: any
}

const props = defineProps<{ tools: ToolDef[] }>()

const search = ref('')
const category = ref<'all' | ToolDef['category']>('all')
const selected = ref<ToolDef | null>(null)

const filtered = computed(() => {
  const keyword = search.value.trim().toLowerCase()
  return props.tools.filter((t) => {
    const byCat = category.value === 'all' || t.category === category.value
    const byKeyword = !keyword || `${t.name} ${t.description}`.toLowerCase().includes(keyword)
    return byCat && byKeyword
  })
})

const categories: { key: 'all' | ToolDef['category']; label: string }[] = [
  { key: 'all', label: '全部工具' },
  { key: 'text', label: '文本处理' },
  { key: 'converter', label: '格式转换' },
  { key: 'calculator', label: '计算工具' },
  { key: 'developer', label: '开发工具' },
  { key: 'utilities', label: '实用工具' },
]
</script>

<template>
  <section class="space-y-6">
    <!-- 搜索栏 -->
    <div class="flex items-center justify-between gap-4">
      <div class="flex-1">
        <div class="relative">
          <input
            v-model="search"
            placeholder="搜索工具..."
            class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
          />
          <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"></i>
        </div>
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="overflow-x-auto pb-2">
      <div class="flex space-x-2 min-w-max">
        <button
          v-for="c in categories"
          :key="c.key"
          class="px-4 py-2 rounded-full transition-colors"
          :class="[
            category === c.key
              ? 'bg-primary text-white'
              : 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200',
          ]"
          @click="category = c.key"
        >
          {{ c.label }}
        </button>
      </div>
    </div>

    <!-- 工具网格 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <ToolCard
        v-for="t in filtered"
        :key="t.id"
        :title="t.name"
        :description="t.description"
        :icon="t.icon"
        @open="selected = t"
      />
    </div>

    <!-- 空态 -->
    <div v-if="filtered.length === 0" class="py-16 text-center">
      <i class="fa fa-search text-5xl text-gray-400 dark:text-gray-500 mb-4"></i>
      <p class="text-gray-500 dark:text-gray-400 text-lg">没有找到匹配的工具</p>
    </div>

    <!-- 弹窗展示选中工具 -->
    <ToolModal
      v-if="selected"
      :open="true"
      :title="selected!.name"
      :icon="selected!.icon"
      @close="selected = null"
    >
      <component :is="selected!.component" />
    </ToolModal>
  </section>
</template>

<style scoped></style>